<template>
    <view class="filter-wrapper" :style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }" @touchmove.stop.prevent="discard">
        <view class="inner-wrapper">
            <view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
            <view class="navs">
				<!-- 布局样式 -->
                <view class="c-flex-align" style="justify-content:center" :class="{ 'c-flex-center': index > 0,'right c-flex-aligin': index == (navData.length-1), actNav: index === actNav }" v-for="(item, index) in navData" :key="index" @click="navClick(index)">
                    <!-- v-if改v-show -->
					<view v-for="(child, childx) in item" :key="childx" v-show="child.select">{{ child.name }}</view>
                    <image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle" v-if="index === actNav"></image>
                    <image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else></image>
                </view>

                
            </view>
            <scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
				<block  v-for="(item, index) in navData[actNav]" :key="index" >
					<view v-if="actNav==0" class="item-opt c-flex-align" :class="item.select ? 'actOpt' : ''" @click="handleOpt(index)">
					    {{ item.name }}
					</view>
					<view v-if="actNav==1" class="item-opt c-flex-align"  >
					   <view style="width: 50%;"> {{ item.name }} </view>
					   <view style="width: 50%;">
						   <view style="width: 90%;text-align: right;" v-if="game_list.length!=0 && index==0">
								<picker :range="game_list" @change="onChange">
									<view>{{game}}</view>
								</picker>
						   </view>
						   <view style="width: 90%;text-align: right;" v-if="device_list.length!=0&& index==1">
								<picker :range="device_list" @change="onChange2">
									<view>{{device}}</view>
								</picker>
						   </view>
						   <view style="width: 90%;text-align: right;" v-if="zhiye.length!=0&& index==2">
								<picker :range="zhiye" @change="onChange3">
									<view>{{zhiye_name}}</view>
								</picker>
						   </view>
						   <view style="width: 90%;text-align: right;" v-if="index==3">
							   <input v-model="max_level" placeholder="最高等级" class="inp" ></input> 
							   <view style="float: right; margin-left: 5rpx;margin-right: 5rpx;">-</view> 
							   <input v-model="min_level" placeholder="最低等级" class="inp"></input> 
						   </view>
						   
					   </view>
					</view>
				</block>
				<view v-if="actNav==1" style="width: 100%;display: flex;padding-bottom: 20rpx;">
					<view @click="qingkong" class="btn2" style="background-color:#fff;color:#000;text-align: center;border:1px solid #ccc;margin-left: 5%;margin-right: 5%;">
					  清空
					</view>
					<view @click="shaixuan" class="btn2" style="margin-left: 5%;text-align: center;">
					  筛选
					</view>
				</view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
// import { getCurDateTime } from '@/libs/utils.js';
export default {
    props: {
        height: {
            type: Number,
            default: 108
        },
        top: {
            type: String,
            default: 'calc(var(--window-statsu-bar) + 44px)'
        },
        border: {
            type: Boolean,
            default: false
        },
        filterData: {
            //必填
            type: Array,
            default: () => {
                return [];
            }
        
        },
		game2:{
			type:String,
			default:'未选择',
		},
        defaultIndex: {
            //默认选中条件索引,超出一类时必填
            type: Array,
            default: () => {
                return [0];
            }
        }
    },
    data() {
        return {
			game:'未选择',
			game_list:[],
			
			device:'未选择',
			device_list:['选择服务器'],
			
			zhiye_name:"未选择",
			zhiye:['选择职业'],
			
			min_level:'',
			max_level:'',
			
            navData: [],
            popupShow: false,
            showMask: false,
            actNav: null,
            selDate: '选择日期',
            selIndex: [] //选中条件索引
        };
    },
    created() {
        let that = this;
		// 修复微信小程序选项设置问题
        setTimeout(function() {
        	
        	that.navData = that.filterData;
        	that.selIndex = that.defaultIndex;
        	that.keepStatus();
        }, 200);
        
    },
    mounted() {
		if(this.game2){
			this.game = this.game2
			var that = this
			uni.request({
				url:getApp().globalData.host+'srapi/home/device_select',
				method:'POST',
				data: { // 请求的参数
					game:that.game
				},
				header: { // 设置请求的header
					'content-type': 'application/json' // 默认值
				},
				success: (res) => {
					if(res.data.data){
						var device_list = res.data.data
						var arr = ['选择服务器'];
						for(var i=0;i<device_list.length;i++){
							arr.push(device_list[i]['title'])
						}
						that.device_list = arr
						that.game_zhiye()
					}
				}
			})
		}
		this.game_select()
		
        // this.selDate = getCurDateTime().formatDate;
    },
    methods: {
		
		qingkong(){
			this.game = '未选择'
			this.device = '未选择'
			this.zhiye_name = '未选择'
			this.max_level = ''
			this.min_level = ''
			var arr = [{
				game:'',device:'',zhiye_name:'',max_level:'',min_level:''
			}]
			this.$emit('onShaixuan', arr);
			setTimeout(() => {
			    this.tapMask();
			}, 100);
		},
		shaixuan(){
			var arr = [{
				game:this.game,device:this.device,zhiye_name:this.zhiye_name,max_level:this.max_level,min_level:this.min_level
			}]
			this.$emit('onShaixuan', arr);
			setTimeout(() => {
			    this.tapMask();
			}, 100);
		},
		game_select(){
			 var that = this
			 uni.request({
				url:getApp().globalData.host+'srapi/home/game_select',
				method:'POST',
				data: { // 请求的参数
				},
				header: { // 设置请求的header
					'content-type': 'application/json' // 默认值
				},
				success: (res) => {
					if(res.data.data){
						var game_list = res.data.data
						var arr = ['选择游戏'];
						for(var i=0;i<game_list.length;i++){
							arr.push(game_list[i]['title'])
						}
						that.game_list = arr
					}
				}
			 })
		},
		onChange(e){
			this.game = this.game_list[e.detail.value]
						
			var that = this
			uni.request({
				url:getApp().globalData.host+'srapi/home/device_select',
				method:'POST',
				data: { // 请求的参数
					game:that.game
				},
				header: { // 设置请求的header
					'content-type': 'application/json' // 默认值
				},
				success: (res) => {
					if(res.data.data){
						var device_list = res.data.data
						var arr = ['选择服务器'];
						for(var i=0;i<device_list.length;i++){
							arr.push(device_list[i]['title'])
						}
						that.device_list = arr
						that.game_zhiye()
					}
				}
			})

		},
		onChange2(e){
			this.device = this.device_list[e.detail.value]
		},
		onChange3(e){
			this.zhiye_name = this.zhiye[e.detail.value]
		},
		game_zhiye(){
			 var that = this
			 uni.request({
				url:getApp().globalData.host+'srapi/home/game_zhiye',
				method:'POST',
				data: { // 请求的参数
					game:that.game
				},
				header: { // 设置请求的header
					'content-type': 'application/json' // 默认值
				},
				success: (res) => {
					that.zhiye = res.data.data
					console.log(that.zhiye)
				}
			 })
		},
		
        keepStatus() {
            this.navData.forEach(itemnavData => {
                itemnavData.map(child => {
                    child.select = false;
                });
                return itemnavData;
            });
            for (let i = 0; i < this.selIndex.length; i++) {
                let selindex = this.selIndex[i];
                this.navData[i][selindex].select = true;
            }
        },
        navClick(index) {
            if (index === this.actNav) {
                this.tapMask();
                return;
            }
            this.popupShow = true;
            this.showMask = true;
            this.actNav = index;
        },
        handleOpt(index) {
            this.selIndex[this.actNav] = index;
            this.keepStatus();
            setTimeout(() => {
                this.tapMask();
            }, 100);
            let data = [];
            let res = this.navData.forEach(item => {
                let sel = item.filter(child => child.select);
                data.push(sel);
            });
            console.log(data);
            this.$emit('onSelected', data);
        },
        dateClick() {
            this.tapMask();
        },
        tapMask() {
            this.showMask = false;
            this.popupShow = false;
            this.actNav = null;
        },
        handleDate(e) {
            let d = e.detail.value;
            this.selDate = d;
            this.$emit('dateChange', d);
        },
        discard() {}
    }
};
</script>

<style lang="scss" scoped>
page {
    font-size: 28rpx;
}
.inp{
	width: 40%;height: 40rpx;border: 1px solid #ccc;text-align: center;font-size: 24rpx;float: right;
}
.c-flex-align {
    display: flex;
    align-items: center;
}
.c-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.btn2{
	z-index: 101;
	background: #3475f3;
	border-radius: 15rpx;
	width: 40%;
	height: 72rpx;
	margin: auto;
	margin-top: 30rpx;
	color: #fff;
	line-height: 72rpx;
	font-size: 24rpx;
	text-align: center;
}
.filter-wrapper {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 999;
    .inner-wrapper {
        // position: relative;
        .navs {
            position: relative;
            height: 80rpx;
            padding: 0 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            border-bottom: 2rpx solid #f5f6f9;
            color: #8b9aae;
            z-index: 999;
            box-sizing: border-box;
            & > view {
                flex: 1;
                height: 100%;
                flex-direction: row;
                z-index: 999;
            }
            .right {
                //justify-content: flex-end;
            }
            .actNav {
                color: #4d7df9;
                font-weight: bold;
            }
        }
        .mask {
            z-index: 666;
            position: fixed;
            top: calc(var(--status-bar-height) + 44px);
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            transition: background-color 0.15s linear;
            &.show {
                background-color: rgba(0, 0, 0, 0.5);
            }
            &.hide {
                display: none;
            }
        }
        .popup {
            position: relative;
            max-height: 550rpx;
            background-color: #fff;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            overflow: scroll;
            z-index: 999;
            transition: all 1s linear;
            opacity: 0;
            display: none;
            .item-opt {
                height: 80rpx;
                padding: 0 40rpx;
                color: #8b9aae;
                border-bottom: 2rpx solid #f5f6f9;
            }
            .actOpt {
                color: #4d7df9;
                font-weight: bold;
                position: relative;
                &::after {
                    content: '✓';
                    font-weight: bold;
                    font-size: 36rpx;
                    position: absolute;
                    right: 40rpx;
                }
            }
        }
        .popupShow {
            display: block;
            opacity: 1;
        }
    }

    .icon-triangle {
        width: 16rpx;
        height: 16rpx;
        margin-left: 10rpx;
    }
}
</style>
